Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reorganize the site editor to introduce Browse Mode. #44770

Merged
merged 84 commits into from
Dec 1, 2022

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Oct 7, 2022

See #36667 (Discussion and review in #45346)

What?

This is a base branch to the on-going work to redo the navigation in the site editor. Target is something close to this

browse.mp4

This is going to be big PR. I'm opening it soon with a lot of todo items so we can see how to split up the work. I think the PR can be landed when all the current features of the site editor are restored properly without any breakage. Once the new edit-site organization is restored, we can work on adding the browse mode to the header in view mode as a first step for "Browse Mode".

I've added a lot of todo comments in the code base in order to keep track of the remaining work, here's the summary of the tasks that we need to solve.

  • Use the Navigator components in the sidebar
  • Finish the "view" mode: Find a way to "disable" the canvas properly in all browsers and unselect blocks... when we leave the "edit" mode.
  • Bring back the WelcomeGuide and adapt it to the new design/navigation
  • Bring back the error boundary and adapt it to the new design
  • Set the window title properly in all situations (useTitle usage)
  • Finish the animation to enter/exit view mode (Reduced motion...)
  • Small questions and code cleanup:
    • open the global styles panel from the URL (keep it or remote it and adapt it)
    • What is the BlockStyles slot component for
    • Should GlobalStylesRendered be a hook?
  • Remove the separate /new/ folder and move the components back to the components folder.
  • Cleanup any CSS, state, components files... from the old designs (navigation sidebar, list page...)
  • Do we need deprecations for all the actions and selectors that were design specific?
  • Design & a11y tweak and iterations
  • Make the dashboard url configurable (setting) as a replacement for __experimentalMainDashboardButton
  • Tests

@youknowriad youknowriad added [Type] Enhancement A suggestion for improvement. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Oct 7, 2022
@youknowriad youknowriad self-assigned this Oct 7, 2022
@youknowriad
Copy link
Contributor Author

There's more than enough for multiple developers in this PR, if you want to do a sub PR to solve one of the todo items, please let us know.

@github-actions
Copy link

github-actions bot commented Oct 7, 2022

Size Change: -1.17 kB (0%)

Total Size: 1.32 MB

Filename Size Change
build/block-editor/content-rtl.css 2.71 kB -41 B (-1%)
build/block-editor/content.css 2.71 kB -39 B (-1%)
build/block-editor/index.min.js 180 kB +18 B (0%)
build/block-editor/style-rtl.css 14.4 kB -2 B (0%)
build/block-editor/style.css 14.4 kB -2 B (0%)
build/components/index.min.js 204 kB -28 B (0%)
build/components/style-rtl.css 11.6 kB -51 B (0%)
build/components/style.css 11.6 kB -53 B (0%)
build/edit-navigation/index.min.js 16.2 kB -40 B (0%)
build/edit-navigation/style-rtl.css 4.08 kB -17 B (0%)
build/edit-navigation/style.css 4.09 kB -17 B (0%)
build/edit-post/index.min.js 34.5 kB -50 B (0%)
build/edit-post/style-rtl.css 7.43 kB -18 B (0%)
build/edit-post/style.css 7.42 kB -17 B (0%)
build/edit-site/index.min.js 60.4 kB -809 B (-1%)
build/edit-site/style-rtl.css 8.55 kB +31 B (0%)
build/edit-site/style.css 8.55 kB +46 B (+1%)
build/edit-widgets/index.min.js 16.7 kB -47 B (0%)
build/edit-widgets/style-rtl.css 4.44 kB -19 B (0%)
build/edit-widgets/style.css 4.44 kB -18 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 7.16 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.04 kB
build/block-editor/default-editor-styles-rtl.css 401 B
build/block-editor/default-editor-styles.css 401 B
build/block-library/blocks/archives/editor-rtl.css 107 B
build/block-library/blocks/archives/editor.css 106 B
build/block-library/blocks/archives/style-rtl.css 129 B
build/block-library/blocks/archives/style.css 129 B
build/block-library/blocks/audio/editor-rtl.css 185 B
build/block-library/blocks/audio/editor.css 185 B
build/block-library/blocks/audio/style-rtl.css 158 B
build/block-library/blocks/audio/style.css 158 B
build/block-library/blocks/audio/theme-rtl.css 172 B
build/block-library/blocks/audio/theme.css 172 B
build/block-library/blocks/avatar/editor-rtl.css 154 B
build/block-library/blocks/avatar/editor.css 154 B
build/block-library/blocks/avatar/style-rtl.css 126 B
build/block-library/blocks/avatar/style.css 126 B
build/block-library/blocks/block/editor-rtl.css 338 B
build/block-library/blocks/block/editor.css 338 B
build/block-library/blocks/button/editor-rtl.css 517 B
build/block-library/blocks/button/editor.css 517 B
build/block-library/blocks/button/style-rtl.css 566 B
build/block-library/blocks/button/style.css 566 B
build/block-library/blocks/buttons/editor-rtl.css 373 B
build/block-library/blocks/buttons/editor.css 373 B
build/block-library/blocks/buttons/style-rtl.css 368 B
build/block-library/blocks/buttons/style.css 368 B
build/block-library/blocks/calendar/style-rtl.css 270 B
build/block-library/blocks/calendar/style.css 270 B
build/block-library/blocks/categories/editor-rtl.css 125 B
build/block-library/blocks/categories/editor.css 124 B
build/block-library/blocks/categories/style-rtl.css 138 B
build/block-library/blocks/categories/style.css 138 B
build/block-library/blocks/code/editor-rtl.css 102 B
build/block-library/blocks/code/editor.css 102 B
build/block-library/blocks/code/style-rtl.css 159 B
build/block-library/blocks/code/style.css 159 B
build/block-library/blocks/code/theme-rtl.css 160 B
build/block-library/blocks/code/theme.css 160 B
build/block-library/blocks/columns/editor-rtl.css 147 B
build/block-library/blocks/columns/editor.css 147 B
build/block-library/blocks/columns/style-rtl.css 442 B
build/block-library/blocks/columns/style.css 442 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 163 B
build/block-library/blocks/comment-author-avatar/editor.css 163 B
build/block-library/blocks/comment-content/style-rtl.css 134 B
build/block-library/blocks/comment-content/style.css 134 B
build/block-library/blocks/comment-template/style-rtl.css 237 B
build/block-library/blocks/comment-template/style.css 236 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 159 B
build/block-library/blocks/comments-pagination-numbers/editor.css 157 B
build/block-library/blocks/comments-pagination/editor-rtl.css 258 B
build/block-library/blocks/comments-pagination/editor.css 249 B
build/block-library/blocks/comments-pagination/style-rtl.css 272 B
build/block-library/blocks/comments-pagination/style.css 268 B
build/block-library/blocks/comments-title/editor-rtl.css 118 B
build/block-library/blocks/comments-title/editor.css 118 B
build/block-library/blocks/comments/editor-rtl.css 875 B
build/block-library/blocks/comments/editor.css 874 B
build/block-library/blocks/comments/style-rtl.css 672 B
build/block-library/blocks/comments/style.css 671 B
build/block-library/blocks/cover/editor-rtl.css 646 B
build/block-library/blocks/cover/editor.css 647 B
build/block-library/blocks/cover/style-rtl.css 1.61 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/embed/editor-rtl.css 327 B
build/block-library/blocks/embed/editor.css 327 B
build/block-library/blocks/embed/style-rtl.css 446 B
build/block-library/blocks/embed/style.css 446 B
build/block-library/blocks/embed/theme-rtl.css 172 B
build/block-library/blocks/embed/theme.css 172 B
build/block-library/blocks/file/editor-rtl.css 335 B
build/block-library/blocks/file/editor.css 335 B
build/block-library/blocks/file/style-rtl.css 288 B
build/block-library/blocks/file/style.css 288 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.47 kB
build/block-library/blocks/freeform/editor.css 2.47 kB
build/block-library/blocks/gallery/editor-rtl.css 987 B
build/block-library/blocks/gallery/editor.css 993 B
build/block-library/blocks/gallery/style-rtl.css 1.58 kB
build/block-library/blocks/gallery/style.css 1.58 kB
build/block-library/blocks/gallery/theme-rtl.css 157 B
build/block-library/blocks/gallery/theme.css 157 B
build/block-library/blocks/group/editor-rtl.css 687 B
build/block-library/blocks/group/editor.css 687 B
build/block-library/blocks/group/style-rtl.css 105 B
build/block-library/blocks/group/style.css 105 B
build/block-library/blocks/group/theme-rtl.css 125 B
build/block-library/blocks/group/theme.css 125 B
build/block-library/blocks/heading/style-rtl.css 128 B
build/block-library/blocks/heading/style.css 128 B
build/block-library/blocks/html/editor-rtl.css 365 B
build/block-library/blocks/html/editor.css 366 B
build/block-library/blocks/image/editor-rtl.css 861 B
build/block-library/blocks/image/editor.css 859 B
build/block-library/blocks/image/style-rtl.css 662 B
build/block-library/blocks/image/style.css 666 B
build/block-library/blocks/image/theme-rtl.css 172 B
build/block-library/blocks/image/theme.css 172 B
build/block-library/blocks/latest-comments/style-rtl.css 333 B
build/block-library/blocks/latest-comments/style.css 333 B
build/block-library/blocks/latest-posts/editor-rtl.css 250 B
build/block-library/blocks/latest-posts/editor.css 249 B
build/block-library/blocks/latest-posts/style-rtl.css 514 B
build/block-library/blocks/latest-posts/style.css 514 B
build/block-library/blocks/list/style-rtl.css 135 B
build/block-library/blocks/list/style.css 135 B
build/block-library/blocks/media-text/editor-rtl.css 300 B
build/block-library/blocks/media-text/editor.css 298 B
build/block-library/blocks/media-text/style-rtl.css 540 B
build/block-library/blocks/media-text/style.css 539 B
build/block-library/blocks/more/editor-rtl.css 465 B
build/block-library/blocks/more/editor.css 465 B
build/block-library/blocks/navigation-link/editor-rtl.css 746 B
build/block-library/blocks/navigation-link/editor.css 744 B
build/block-library/blocks/navigation-link/style-rtl.css 153 B
build/block-library/blocks/navigation-link/style.css 153 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 333 B
build/block-library/blocks/navigation-submenu/editor.css 333 B
build/block-library/blocks/navigation/editor-rtl.css 2.19 kB
build/block-library/blocks/navigation/editor.css 2.19 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
build/block-library/blocks/nextpage/editor-rtl.css 428 B
build/block-library/blocks/nextpage/editor.css 428 B
build/block-library/blocks/page-list/editor-rtl.css 397 B
build/block-library/blocks/page-list/editor.css 398 B
build/block-library/blocks/page-list/style-rtl.css 212 B
build/block-library/blocks/page-list/style.css 212 B
build/block-library/blocks/paragraph/editor-rtl.css 214 B
build/block-library/blocks/paragraph/editor.css 214 B
build/block-library/blocks/paragraph/style-rtl.css 321 B
build/block-library/blocks/paragraph/style.css 321 B
build/block-library/blocks/post-author/style-rtl.css 212 B
build/block-library/blocks/post-author/style.css 212 B
build/block-library/blocks/post-comments-form/editor-rtl.css 137 B
build/block-library/blocks/post-comments-form/editor.css 137 B
build/block-library/blocks/post-comments-form/style-rtl.css 536 B
build/block-library/blocks/post-comments-form/style.css 537 B
build/block-library/blocks/post-date/style-rtl.css 107 B
build/block-library/blocks/post-date/style.css 107 B
build/block-library/blocks/post-excerpt/editor-rtl.css 119 B
build/block-library/blocks/post-excerpt/editor.css 119 B
build/block-library/blocks/post-excerpt/style-rtl.css 116 B
build/block-library/blocks/post-excerpt/style.css 116 B
build/block-library/blocks/post-featured-image/editor-rtl.css 620 B
build/block-library/blocks/post-featured-image/editor.css 618 B
build/block-library/blocks/post-featured-image/style-rtl.css 349 B
build/block-library/blocks/post-featured-image/style.css 349 B
build/block-library/blocks/post-navigation-link/style-rtl.css 190 B
build/block-library/blocks/post-navigation-link/style.css 189 B
build/block-library/blocks/post-template/editor-rtl.css 140 B
build/block-library/blocks/post-template/editor.css 139 B
build/block-library/blocks/post-template/style-rtl.css 317 B
build/block-library/blocks/post-template/style.css 317 B
build/block-library/blocks/post-terms/style-rtl.css 136 B
build/block-library/blocks/post-terms/style.css 136 B
build/block-library/blocks/post-title/style-rtl.css 138 B
build/block-library/blocks/post-title/style.css 138 B
build/block-library/blocks/preformatted/style-rtl.css 139 B
build/block-library/blocks/preformatted/style.css 139 B
build/block-library/blocks/pullquote/editor-rtl.css 170 B
build/block-library/blocks/pullquote/editor.css 170 B
build/block-library/blocks/pullquote/style-rtl.css 357 B
build/block-library/blocks/pullquote/style.css 357 B
build/block-library/blocks/pullquote/theme-rtl.css 201 B
build/block-library/blocks/pullquote/theme.css 201 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 158 B
build/block-library/blocks/query-pagination-numbers/editor.css 156 B
build/block-library/blocks/query-pagination/editor-rtl.css 258 B
build/block-library/blocks/query-pagination/editor.css 247 B
build/block-library/blocks/query-pagination/style-rtl.css 326 B
build/block-library/blocks/query-pagination/style.css 322 B
build/block-library/blocks/query-title/style-rtl.css 108 B
build/block-library/blocks/query-title/style.css 108 B
build/block-library/blocks/query/editor-rtl.css 475 B
build/block-library/blocks/query/editor.css 477 B
build/block-library/blocks/quote/style-rtl.css 253 B
build/block-library/blocks/quote/style.css 253 B
build/block-library/blocks/quote/theme-rtl.css 255 B
build/block-library/blocks/quote/theme.css 259 B
build/block-library/blocks/read-more/style-rtl.css 168 B
build/block-library/blocks/read-more/style.css 168 B
build/block-library/blocks/rss/editor-rtl.css 239 B
build/block-library/blocks/rss/editor.css 240 B
build/block-library/blocks/rss/style-rtl.css 323 B
build/block-library/blocks/rss/style.css 323 B
build/block-library/blocks/search/editor-rtl.css 205 B
build/block-library/blocks/search/editor.css 205 B
build/block-library/blocks/search/style-rtl.css 441 B
build/block-library/blocks/search/style.css 439 B
build/block-library/blocks/search/theme-rtl.css 149 B
build/block-library/blocks/search/theme.css 149 B
build/block-library/blocks/separator/editor-rtl.css 184 B
build/block-library/blocks/separator/editor.css 184 B
build/block-library/blocks/separator/style-rtl.css 269 B
build/block-library/blocks/separator/style.css 269 B
build/block-library/blocks/separator/theme-rtl.css 229 B
build/block-library/blocks/separator/theme.css 229 B
build/block-library/blocks/shortcode/editor-rtl.css 508 B
build/block-library/blocks/shortcode/editor.css 508 B
build/block-library/blocks/site-logo/editor-rtl.css 522 B
build/block-library/blocks/site-logo/editor.css 522 B
build/block-library/blocks/site-logo/style-rtl.css 238 B
build/block-library/blocks/site-logo/style.css 238 B
build/block-library/blocks/site-tagline/editor-rtl.css 129 B
build/block-library/blocks/site-tagline/editor.css 129 B
build/block-library/blocks/site-title/editor-rtl.css 155 B
build/block-library/blocks/site-title/editor.css 155 B
build/block-library/blocks/site-title/style-rtl.css 101 B
build/block-library/blocks/site-title/style.css 101 B
build/block-library/blocks/social-link/editor-rtl.css 219 B
build/block-library/blocks/social-link/editor.css 219 B
build/block-library/blocks/social-links/editor-rtl.css 709 B
build/block-library/blocks/social-links/editor.css 708 B
build/block-library/blocks/social-links/style-rtl.css 1.43 kB
build/block-library/blocks/social-links/style.css 1.43 kB
build/block-library/blocks/spacer/editor-rtl.css 372 B
build/block-library/blocks/spacer/editor.css 372 B
build/block-library/blocks/spacer/style-rtl.css 96 B
build/block-library/blocks/spacer/style.css 96 B
build/block-library/blocks/table/editor-rtl.css 547 B
build/block-library/blocks/table/editor.css 547 B
build/block-library/blocks/table/style-rtl.css 670 B
build/block-library/blocks/table/style.css 669 B
build/block-library/blocks/table/theme-rtl.css 220 B
build/block-library/blocks/table/theme.css 220 B
build/block-library/blocks/tag-cloud/style-rtl.css 287 B
build/block-library/blocks/tag-cloud/style.css 288 B
build/block-library/blocks/template-part/editor-rtl.css 436 B
build/block-library/blocks/template-part/editor.css 436 B
build/block-library/blocks/template-part/theme-rtl.css 139 B
build/block-library/blocks/template-part/theme.css 139 B
build/block-library/blocks/text-columns/editor-rtl.css 135 B
build/block-library/blocks/text-columns/editor.css 135 B
build/block-library/blocks/text-columns/style-rtl.css 198 B
build/block-library/blocks/text-columns/style.css 198 B
build/block-library/blocks/verse/style-rtl.css 130 B
build/block-library/blocks/verse/style.css 130 B
build/block-library/blocks/video/editor-rtl.css 720 B
build/block-library/blocks/video/editor.css 723 B
build/block-library/blocks/video/style-rtl.css 218 B
build/block-library/blocks/video/style.css 218 B
build/block-library/blocks/video/theme-rtl.css 171 B
build/block-library/blocks/video/theme.css 171 B
build/block-library/classic-rtl.css 193 B
build/block-library/classic.css 193 B
build/block-library/common-rtl.css 1.05 kB
build/block-library/common.css 1.05 kB
build/block-library/editor-elements-rtl.css 126 B
build/block-library/editor-elements.css 126 B
build/block-library/editor-rtl.css 11.7 kB
build/block-library/editor.css 11.7 kB
build/block-library/elements-rtl.css 105 B
build/block-library/elements.css 105 B
build/block-library/index.min.js 196 kB
build/block-library/reset-rtl.css 514 B
build/block-library/reset.css 514 B
build/block-library/style-rtl.css 12.4 kB
build/block-library/style.css 12.4 kB
build/block-library/theme-rtl.css 749 B
build/block-library/theme.css 753 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 50 kB
build/compose/index.min.js 12.3 kB
build/core-data/index.min.js 15.6 kB
build/customize-widgets/index.min.js 11.3 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.12 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.74 kB
build/edit-post/classic-rtl.css 569 B
build/edit-post/classic.css 570 B
build/editor/index.min.js 44 kB
build/editor/style-rtl.css 3.65 kB
build/editor/style.css 3.64 kB
build/element/index.min.js 4.72 kB
build/escape-html/index.min.js 548 B
build/experiments/index.min.js 882 B
build/format-library/index.min.js 6.96 kB
build/format-library/style-rtl.css 596 B
build/format-library/style.css 596 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.86 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 858 B
build/list-reusable-blocks/style.css 857 B
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 977 B
build/nux/index.min.js 2.07 kB
build/nux/style-rtl.css 772 B
build/nux/style.css 768 B
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.59 kB
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 281 B
build/reusable-blocks/style.css 281 B
build/rich-text/index.min.js 10.7 kB
build/server-side-render/index.min.js 1.77 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.51 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.7 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.23 kB
build/widgets/style-rtl.css 1.21 kB
build/widgets/style.css 1.21 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@jasmussen
Copy link
Contributor

This is really exciting to see, thanks so much for working on this! Even in this early state, it feels like there are benefits to have with this structure: not just being dumped into editing a specific template, but letting you choose one first, comes to mind.

One small nitpick off the top: I'd keep the dark-background W inside the fullscreen editor and have it remain a fixed anchor across everything. This is an older prototype showing the interaction, but as you can see it's keeping the W fixed even across animations.

@youknowriad
Copy link
Contributor Author

One small nitpick off the top: I'd keep the dark-background W inside the fullscreen editor and have it remain a fixed anchor across everything. #36667 (comment), but as you can see it's keeping the W fixed even across animations.

What would the "W" button do, when the sidebar is open?

@mtias
Copy link
Member

mtias commented Oct 7, 2022

One of the ideas for later is that it would pull you out of the "appearance" menu and send you to the root of the admin.

@priethor priethor mentioned this pull request Oct 7, 2022
6 tasks
@youknowriad
Copy link
Contributor Author

One of the ideas for later is that it would pull you out of the "appearance" menu and send you to the root of the admin.

For me, that is a suggestion that the button in the sidebar and the one in the header of "edit" mode are actually two completely different things.

I think the button in the header of "edit" mode and the "edit" button in the "view" mode are the same thing though. So despite their content change (logo or "edit" text), semantically that button is the same thing, it's just a button to toggle between "edit" and "view" mode. Also by keeping that button as a single one to toggle between both, we solve potential "focus loss" issue because the focus would just stay in the button itself.

Now, that doesn't mean we can try to do something visually close to the mockup where "it" feels like the button doesn't move.

@mtias
Copy link
Member

mtias commented Oct 10, 2022

I wouldn't say that it's semantically a different button, it just has contextual behaviours like the home button used to have on iphones, but it's the same element.

@Mamaduka
Copy link
Member

Use the Navigator components and bring back the "template/template parts list" to the sidebar of the site editor instead of a dedicated page

I just wanted to note that this change will probably break block-based template parts for the Classic theme. The current implementation relies on the dedicated page list. Not a blocker, but something to keep in mind :)

@jameskoster
Copy link
Contributor

Exciting PR! :D

Use the Navigator components and bring back the "template/template parts list" to the sidebar of the site editor instead of a dedicated page

I don't know if this was decided upon separately but I'm not sure its the best approach. A 'dedicated' list view will likely be needed to handle bulk actions. If we have both, the flows can get a bit awkward.

An alternative direction would be to keep the list view(s) and provide access to them via the Navigator like so:

templates.mp4

From here we can expand to include the aforementioned bulk actions. It also provides a consistent destination for the W button when editing a template – back to the full templates list. This aligns with the Post / Page editor.


I assume it's part of the "Finish the "view" mode" item, but I just wanted to note that if you have the Inspector or Global Styles open in edit mode, they remain open in view mode:

Screenshot 2022-10-11 at 15 40 16

@annezazu annezazu added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Oct 11, 2022
@mtias
Copy link
Member

mtias commented Oct 12, 2022

@jameskoster I think we went too far with the full canvas management view for templates as the default and we need to bring back the quick access in the sidebar. For most operations — selecting a template and creating a new one — the sidebar is the fastest and least disorienting route. We should keep the full list view available for more advanced operations, integrations with plugin bundles, listing all customized templates (from all themes), etc. In a similar way how we still want to get quick access to pages but it doesn't replace the pages admin management view.

@youknowriad
Copy link
Contributor Author

Ok, let's keep the dedicated views for now, and we can iterate on the navigation sidebar more easily now. Let's just try to find the minimum acceptable changes to be done in this PR.

@jameskoster
Copy link
Contributor

Okay, more detailed explorations can take place in #37001.

@youknowriad
Copy link
Contributor Author

I just wanted to note that this change will probably break block-based template parts for the Classic theme. The current implementation relies on the dedicated page list. Not a blocker, but something to keep in mind :)

@Mamaduka Do you know if this is something that is covered by an e2e test. I think it would be great to add one if not.

@Mamaduka
Copy link
Member

Mamaduka commented Oct 13, 2022

@youknowriad, I'll try and add a simple e2e test case 👍

I can see that we're keeping the template list view, so that solves my main concern :)

@talldan
Copy link
Contributor

talldan commented Oct 13, 2022

This is going to be big PR. I'm opening it soon with a lot of todo items so we can see how to split up the work. I think the PR can be landed when all the current features of the site editor are restored properly without any breakage.

It definitely is an exciting PR, but is there a way to avoid shipping this in one big PR? I've been contributing for a while now, and I notice every time we do this it results in a tonne of regressions. No matter how hard contributors try to verify there's no breakage, there's always a lot. G2 was like that. Popover refactor to floating-ui was like that (@ciampo, @ntsekouras and I were fixing bugs for months), and a lot of other bigger refactors have been like that.

It is a huge time killer. When fixing popover bugs I personally had very little time to work on features as I wanted to make sure there weren't major bugs in 6.1—either that or reverting the refactor were the only solutions, but by that time a revert was already complicated.

I think it'd be really good if we could try breaking this into smaller more reviewable chunks, potentially behind experimental feature toggles if those features can't be released separately during the development process. This PR can act as a spike/exploration, but not something that's merged.

@jasmussen
Copy link
Contributor

jasmussen commented Oct 13, 2022

Took this for a quick spin, and it's coming together so fast, nice!

status

A few small notes:

  • How do I get back to seeing the viewport with the site? In some of the prototypes, the Design section always shows the viewport, so for example clicking "< Design" from the Navigation submenu takes you back and reloads the viewport. But in this case we also have those Templates and Template Part which open directly on the right. So without a back button there, we need some other way to go back to the main tab. @jameskoster any thoughts here?
  • Same challenge with going first to Templates, then Navigation Menus, then back — the Templates tab still shows as active. Navigation should ideally load the homepage in the viewport as well, so you have a chance of seeing the result of your actions.
  • I think it's pretty important that we keep the dark background behind the W. The design in The great unification #41717 is inaccurate in this sense, and this post, especially the "Home Button" section, is a better source of truth. Also worth trying with a site logo set, as that should also remain in both states.
  • I think it should be "Navigation", instead of "Navigation Menus". I wouldn't think many people have more than one. Keep it short and sweet.

@youknowriad youknowriad merged commit 2421c97 into trunk Dec 1, 2022
@youknowriad youknowriad deleted the try/admin-navigation branch December 1, 2022 08:02
@youknowriad
Copy link
Contributor Author

Thanks all for your help on this PR, this is only the first step, I added a list of todo list items to the parent issue #36667

@github-actions github-actions bot added this to the Gutenberg 14.8 milestone Dec 1, 2022
mpkelly pushed a commit to mpkelly/gutenberg that referenced this pull request Dec 7, 2022
Co-authored-by: James Koster <james@jameskoster.co.uk>
Co-authored-by: Matías Ventura <mv@matiasventura.com>
@andrewserong
Copy link
Contributor

andrewserong commented Dec 12, 2022

Hi folks, it looks like this PR introduced a regression for resetting global styles back to their defaults. I've opened up an issue in #46484

Update: a fix has been merged in #46486

@afercia
Copy link
Contributor

afercia commented Dec 13, 2022

Looks like this PR broke the ARIA landmarks structure and the navigateRegions functionality. I'll try to detail in a new issue. Kindly asking to add this item to the todo list in #36667

@youknowriad
Copy link
Contributor Author

@afercia Thanks for the notice, I'll be taking a look.

@bph bph added the Needs User Documentation Needs new user documentation label Dec 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.